<template>
  <div>
    <a-card
    style="width: 100%"
    title="预警规则"
  >
  <a-tabs v-model:activeKey="key">
    <a-tab-pane key="first" tab="超重预警">
       <a-table :columns="columns" :data-source="tabledata" >
        <template #yellowValue="{ record }">
           <a-form layout="inline" :model="record" style="align-items: center">
         <a-form-item label="重量差" style="width:36%">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="record.yellowSymbol"
             @change="handleSetWarnRule('yellowSymbol',record.yellowSymbol,record)"
          >
            <a-select-option
              v-for="item in conditionList"
              :key="item.code"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
           <a-form-item style="width:25%">
             <a-input  @blur="handleSetWarnRule('yellowValue',record.yellowValue,record)"  v-model:value="record.yellowValue"></a-input>
           </a-form-item>
            <a-form-item style="width:25%">
          <a-select
            allowClear
             style="width: 100%"
            v-model:value="record.yellowUnit"
            @change="handleSetWarnRule('yellowUnit',record.yellowUnit,record)" 
          >
            <a-select-option
              v-for="item in unitList"
              :key="item.code"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
           </a-form>
        </template>
          <template #redValue="{ record }">
           <a-form layout="inline" :model="record" style="align-items: center">
         <a-form-item label="重量差" style="width:36%">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="record.redSymbol"
              @change="handleSetWarnRule('redSymbol',record.redSymbol,record)" 
          >
            <a-select-option
              v-for="item in conditionList"
              :key="item.code"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
           <a-form-item style="width:25%">
             <a-input  @blur="handleSetWarnRule('redValue',record.redValue,record)"  v-model:value="record.redValue"></a-input>
           </a-form-item>
            <a-form-item style="width:25%">
          <a-select
            allowClear
            style="width: 100%"
            v-model:value="record.redUnit"
             @change="handleSetWarnRule('redUnit',record.redUnit,record)" 
          >
            <a-select-option
              v-for="item in unitList"
              :key="item.code"
              :value="item.code"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
           </a-form>
        </template>
     </a-table>
    </a-tab-pane>
    <a-tab-pane key="second" tab="超时预警" force-render>
      <a-table :columns="columns1" :data-source="warnTimeDataList">
         <template #1="{ record }" >
          <a-input-number  @blur="handleSaveWarnTime(`${record.key}Value1`)" v-model:value="dataForm[`${record.key}Value1`]" :min="0"  :formatter="value => `${value}小时`"/>
         </template>
           <template #2="{ record }" >
          <a-input-number  @blur="handleSaveWarnTime(`${record.key}Value2`)" v-model:value="dataForm[`${record.key}Value2`]" :min="0"  :formatter="value => `${value}小时`"/>
         </template>
           <template #3="{ record }" >
          <a-input-number  @blur="handleSaveWarnTime(`${record.key}Value3`)" v-model:value="dataForm[`${record.key}Value3`]" :min="0"  :formatter="value => `${value}小时`"/>
         </template>
           <template #4="{ record }" >
          <a-input-number  @blur="handleSaveWarnTime(`${record.key}Value4`)" v-model:value="dataForm[`${record.key}Value4`]" :min="0"  :formatter="value => `${value}小时`"/>
         </template>
           <template #5="{ record }" >
          <a-input-number  @blur="handleSaveWarnTime(`${record.key}Value5`)" v-model:value="dataForm[`${record.key}Value5`]" :min="0"  :formatter="value => `${value}小时`"/>
         </template>
           <template #6="{ record }" >
          <a-input-number  @blur="handleSaveWarnTime(`${record.key}Value6`)" v-model:value="dataForm[`${record.key}Value6`]" :min="0"  :formatter="value => `${value}小时`"/>
         </template>
           <template #7="{ record }" >
          <a-input-number  @blur="handleSaveWarnTime(`${record.key}Value7`)" v-model:value="dataForm[`${record.key}Value7`]" :min="0"  :formatter="value => `${value}小时`"/>
         </template>
      </a-table>
    </a-tab-pane>
 
  </a-tabs>
    
  </a-card>
  </div>
</template>
<script>
import { createVNode, onMounted, reactive, ref, toRefs, watch } from "vue";
import * as alarmRecordApi from "@/api/alarmRecord";
import * as alarmRulesApi from "@/api/alarmRules";
import * as Utils from "@/utils/index";
import { message } from 'ant-design-vue';
export default {
  setup(props) {
    const columns = [{
  title: '',
  dataIndex: 'wasteClassifyName',
  key: 'wasteClassifyName',
  width:100
},{
  title: '黄色预警',
  dataIndex: 'yellowValue',
  // key: 'yellowValue',
  slots: { customRender: "yellowValue" },
},{
  title: '红色预警',
  dataIndex: 'redValue',
 slots: { customRender: "redValue" },
}]

const columns1 = [{
  title:'',
  dataIndex: 'name',
},{
  title:'周一',
 slots: { customRender: "1" },
},{
  title:'周二',
 slots: { customRender: "2" },
},{
  title:'周三',
   slots: { customRender: "3" },
},{
  title:'周四',
 slots: { customRender: "4" },
},{
  title:'周五',
 slots: { customRender: "5" },
},{
  title:'周六',
   slots: { customRender: "6" },
},{
  title:'周日',
   slots: { customRender: "7" },
}]
const warnTimeDataList = [
        {
          name: "收运红色",
          key: "collectRed",
        },
        {
          name: "收运黄色",
          key: "collectYellow",
        },
        {
          name: "入库红色",
          key: "inRed",
        },
        {
          name: "入库黄色",
          key: "inYellow",
        },
        {
          name: "出库红色",
          key: "outRed",
        },
        {
          name: "出库黄色",
          key: "outYellow",
        },
      ]
    const tabList = [{
      key: 'first',
      tab: '超重预警',
    }, {
      key: 'second',
      tab: '超时预警',
    }];
    const key = ref('first')

    //获取超时预警
    const dataForm = ref({})
   const handleGetWarnTimeGet = ()=>{
      alarmRulesApi.warnTimeGet().then((res) => {
        if (res && res.success) {
          console.log(11)
          console.log(res.data)
          dataForm.value = res.data;
        }
      });
    }

    // 超时保存
    const handleSaveWarnTime = (item)=>{
      let params = {
        id: dataForm.value.id,
        [item]:dataForm.value[item],
      };
      alarmRulesApi.warnTimeSave(params).then((res) => {
        if (res && res.success) {
       message.success('操作成功')
        } else {
        }
      });
    }
  //获取超重预警数据
  const tabledata =ref([])
    const handleGetDataList = ()=>{
      let params = {
         pageIndex:  1,
        pageSize: 10,
      }
      alarmRecordApi.warnWeightList(params).then((res) => {
        if (res && res.success) {
          console.log(res)
          tabledata.value = res.data;
        }
      });
    }
    //超重保存
    const handleSetWarnRule =(key, value, item)=>{
      let params = {
        id: item.id,
        [key]: value,
      };
      alarmRecordApi.warnWeightSave(params).then((res) => {
       message.success('操作成功')
      });
    }
     //获取预警类型枚举值
     const conditionList = ref([])
      const unitList = ref([])
    const handleGetalarmTypeList = (type)=>{
      alarmRecordApi.getListByType({ type: type }).then((res) => {
        if (res && res.success) {
          if (type == "warn_weight_condition") {
            conditionList.value = res.data;
          } else {
            unitList.value = res.data;
          }
        }
      });
    }
     const onTabChange = (value, type) => {
      console.log(value, type);
 key.value = value;
     
    };
    onMounted(()=>{
      handleGetDataList()
      handleGetWarnTimeGet()
      handleGetalarmTypeList('warn_weight_condition')
         handleGetalarmTypeList('warn_weight_unit')
      
    })
    return {
      tabList,
      key,
      onTabChange,

      // 超重预警数据
      tabledata,
      handleSetWarnRule,
      columns,
      // 预警枚举值列表
      conditionList,
      unitList,


      // 超时预警
      dataForm,
      warnTimeDataList,
      columns1,
      handleSaveWarnTime
    }
  }
}
</script>